<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
  <!-- BEGIN: Head-->
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google.">
    <meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template, eCommerce dashboard, analytic dashboard">
    <meta name="author" content="ThemeSelect">
    <title>生态圈系统-验证优惠券</title>
    <link rel="icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="apple-touch-icon" th:href="@{/images/favicon.ico}" th:mce_href="@{/images/favicon.ico}" type="image/x-icon">
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="css/bootstrap.min.css" th:href="@{/css/bootstrap.css}" type="text/css" rel="stylesheet"/>
    <!-- BEGIN: VENDOR CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/vendors.min.css" th:href="@{/app-assets/vendors/vendors.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/flag-icon/css/flag-icon.min.css" th:href="@{/app-assets/vendors/flag-icon/css/flag-icon.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/css/jquery.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/css/jquery.dataTables.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/vendors/data-tables/css/select.dataTables.min.css" th:href="@{/app-assets/vendors/data-tables/css/select.dataTables.min.css}">
    <!-- END: VENDOR CSS-->
    <!-- BEGIN: Page Level CSS-->
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/vertical-gradient-menu-template/materialize.css" th:href="@{/app-assets/css/themes/vertical-gradient-menu-template/materialize.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/themes/vertical-gradient-menu-template/style.css" th:href="@{/app-assets/css/themes/vertical-gradient-menu-template/style.css}">
    <link rel="stylesheet" type="text/css" href="../../../app-assets/css/pages/data-tables.css" th:href="@{/app-assets/css/pages/data-tables.css}">
    <!-- END: Page Level CSS-->
    <!-- BEGIN: Custom CSS-->
    <link href="plugins/bootstrap-datepicker/css/bootstrap-datepicker.css" th:href="@{/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css}" type="text/css" rel="stylesheet"/>
	  <link href="plugins/bootstrap-sweetalert/sweetalert.css" th:href="@{/plugins/bootstrap-sweetalert/sweetalert.css}" type="text/css" rel="stylesheet"/>
	  <link rel="stylesheet" type="text/css" href="../../../app-assets/css/custom/custom.css" th:href="@{/app-assets/css/custom/custom.css}">
    <!-- END: Custom CSS-->
    
    <style>
	    .input-field > label:not(.label-icon).active {
	      line-height: 0rem;
	    }
	    .select-wrapper input.select-dropdown {
	      font-size: 26px;
	      height: 4.5rem;
	    }
	  </style>
  </head>
  <!-- END: Head-->
  <body class="vertical-layout page-header-light vertical-menu-collapsible vertical-gradient-menu 2-columns" data-open="click" data-menu="vertical-gradient-menu" data-col="2-columns">

    <!-- BEGIN: Header-->
    <div th:replace="common/header_company :: header"></div>
    <!-- END: Header-->

    <div th:replace="common/aside_company :: aside"></div>

    <!-- BEGIN: Page Main-->
    <div id="main">
      <div class="row">
        <div class="pt-3 pb-1" id="breadcrumbs-wrapper">
          <!-- Search for small screen-->
          <div class="container">
            <div class="row">
              <div class="col s12 m6 l6">
                <h5 class="breadcrumbs-title mt-0 mb-0" id="page-title" active-menu="validate-menu">验证优惠券</h5>
              </div>
              <div class="col s12 m6 l6 right-align-md hide">
                <ol class="breadcrumbs mb-0">
                  <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                  <li class="breadcrumb-item"><a href="#">Pages</a></li>
                  <li class="breadcrumb-item active">Blank Page</li>
                </ol>
              </div>
            </div>
          </div>
        </div>
        <div class="col s12">
          <div class="container">
            <div class="section section-data-tables">
              <div class="row">
                <div class="col s12 m12 l12">
                  <div id="button-trigger" class="card card card-default scrollspy">
                    <div class="card-content">
                      <div class="row">
                        <div class="col s12 input-field"></div>
								        <div class="col s6 offset-s3 input-field">
								          <select name="activityId">
								            <option value="" disabled selected>权益</option>
								            <option th:each="a : ${activities}" th:value="${a.id}"  th:text="${a.title}">权益1</option>
								          </select>
								          <span class="helper-text" data-error="wrong" data-success="right"></span>
								        </div>
								        <div class="col s3 offset-s3 input-field">
								          <input type="text" id="coupon" name="coupon" maxlength="12" style="font-size: 40px; font-weight: 700; height: 4.5rem;" >
								          <label for="coupon" style="font-size: 26px;">优惠券验证码</label>
								        </div>
								        <div class="col s3 input-field">
								          <input type="text" id="secret" name="secret" maxlength="12" style="font-size: 40px; font-weight: 700; height: 4.5rem;" >
								          <label for="secret" style="font-size: 26px;">优惠券密码</label>
								        </div>
								        <div class="col s12 input-field"></div>
								        <div class="col s12 input-field"></div>
								        <div class="col s12 input-field" style="text-align: center;">
								          <button class="waves-effect waves-light btn btn-large light-blue darken-1" onclick="validateSubmit();" style="margin: 5px; font-size: 20px;"><i class="material-icons left">bubble_chart</i>验证</button>
								        </div>
								      </div>
								    </div>
								    <div class="row" style="margin: 0 15px; display: none;">
								      <div class="col s8">
								        <div id="table_body_div" style="max-height: 320px; position: relative;">
								          <div>
								            <table>
								              <thead>
								                <tr>
								                  <th width="50%" class="center">
								                    <label>
								                      <input type="checkbox" id="select_all" class="filled-in"/>
								                      <span style="top: 8px;"></span>
								                    </label>
								                  </th>
								                  <th width="50%">验证码</th>
								                </tr>
								              </thead>
								            </table>
								          </div>
								          <div>
								            <table class="highlight">
								              <thead>
								                <tr>
								                  <th class="no-padding" width="50%"></th>
								                  <th class="no-padding" width="50%"></th>
								                </tr>
								              </thead>
								              <tbody id="tbody">
								                <!-- <tr>
								                  <td>
								                    <label>
								                      <input type="checkbox" checked="checked" />
								                      <span></span>
								                    </label>
								                  </td>
								                  <td>8888888888</td>
								                </tr> -->
								              </tbody>
								            </table>
								          </div>
								        </div>
								      </div>
								
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END: Page Main-->

    <!-- BEGIN: Footer-->

    <div th:replace="common/footer :: footer"></div>
    
    <!-- END: Footer-->
    
	  <div th:replace="common/update_pwd :: #modal3"></div>
	
    <!-- BEGIN VENDOR JS-->
    <script src="../../../app-assets/js/vendors.min.js" th:src="@{/app-assets/js/vendors.min.js}" type="text/javascript"></script>
    <!-- BEGIN VENDOR JS-->
    <!-- BEGIN PAGE VENDOR JS-->
    <script src="../../../app-assets/vendors/data-tables/js/jquery.dataTables.min.js" th:src="@{/app-assets/vendors/data-tables/js/jquery.dataTables.min.js}" type="text/javascript"></script>
    <script src="../../../app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js" th:src="@{/app-assets/vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js}" type="text/javascript"></script>
    <script src="../../../app-assets/vendors/data-tables/js/dataTables.select.min.js" th:src="@{/app-assets/vendors/data-tables/js/dataTables.select.min.js}" type="text/javascript"></script>
    <!-- END PAGE VENDOR JS-->
    <!-- BEGIN THEME  JS-->
    <script src="../../../app-assets/js/plugins.js" th:src="@{/app-assets/js/plugins.js}" type="text/javascript"></script>
    <script src="../../../app-assets/js/custom/custom-script.js" th:src="@{/app-assets/js/custom/custom-script.js}" type="text/javascript"></script>
    <!-- END THEME  JS-->
    <!-- BEGIN PAGE LEVEL JS-->
    <script src="../../../app-assets/js/scripts/data-tables.js" th:src="@{/app-assets/js/scripts/data-tables.js}" type="text/javascript"></script>
    <!-- END PAGE LEVEL JS-->
    <script src="plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js" th:src="@{/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
	  <script src="plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js" th:src="@{/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js}" charset="UTF-8"></script>
	  <script src="plugins/bootstrap-sweetalert/sweetalert.min.js" th:src="@{/plugins/bootstrap-sweetalert/sweetalert.min.js}"></script>
    <script src="js/common.js" th:src="@{/js/common.js}"></script>
    <script>
	    $("#coupon").focus();
	
	    var p = document.getElementById('table_body_div');
	
	    function validateSubmit() {
	      var activityId =  $('select[name="activityId"]').val();
	      if(!activityId) {
	        swal("请选择权益!", {
	          icon: "error",
	          //timer: 2000,
	        });
	        return;
	      }
	      var coupon_code = $('#coupon').val().replace(/ /g, '');
	      if(!coupon_code) {
	        swal("请输入优惠券验证码!", {
	          icon: "error",
	          //timer: 2000,
	        });
	        return;
	      }
	      $.ajax({
	        type: "POST",
	        url: context_path + "/api/v2/coupons/" + coupon_code + "/verify",
	        data: "secretCode=" + $('#secret').val() + "&activityId=" + $('select[name="activityId"]').val(),
	        success: function(data){
	          //alert( "Data Saved: " + msg );
	          if(data.verify.opResult == "success") {
	            var table_str = '';
	            if(data.others != null && data.others.length > 0) {
	              data.others.forEach(function(v) {
	                table_str += '<tr>'
	                         + '<td class="center">'
	                         + '<label>'
	                         + '<input type="checkbox" name="couponCode" class="filled-in" value="' + v.inputCouponCode + '" />'
	                         +  '<span style="top: 8px;"></span>'
	                         + '</label>'
	                         + '</td>'
	                         + '<td>' + v.inputCouponCode + '</td>'
	                         + '</tr>';
	              });
	            }
	            $('#tbody').html(table_str);
	            swal({
	              title: coupon_code,
	              icon: "success",
	              text: "该优惠券验证码有效，并且可与下列优惠券同时使用",
	              content: {
	                element: p,
	              },
	              buttons: {
	                cancel: {
	                  text: "取消",
	                  value: false,
	                  visible: true,
	                  className: "waves-effect waves-light btn-flat",
	                  closeModal: true,
	                },
	                confirm: {
	                  text: "使用",
	                  value: true,
	                  className: "waves-effect waves-light"
	                }
	              },
	            }).then(function(willDelete) {
	              if (willDelete) {
	                //console.log($("input[name='couponCode']:checked")[0].value);
	                //console.log($("input[name='couponCode']:checked")[1].value);
	
	                var couponCodeCheckboxes = $("input[name='couponCode']:checked");
	                var couponCodeArr = '';
	                couponCodeArr += '["' + coupon_code + '"';
	                if(couponCodeCheckboxes.length > 0) {
	                  for(var i = 0; i < couponCodeCheckboxes.length; i++) {
	                    couponCodeArr += ', "' + couponCodeCheckboxes[i].value + '"';
	                  }
	                }
	                couponCodeArr += ']';
	                console.log(couponCodeArr);
	                $.ajax({
	                  url: context_path + "/api/v2/coupons/services/redeem?&activityId=" + $('select[name="activityId"]').val() + "&remark=",
	                  data: couponCodeArr,
	                  contentType: "application/json;charset=utf-8",
	                  type: "POST",
	                  headers: {
	                    Accept: "application/json"
	                  },
	                  dataType: "json",
	                  success: function(data, textStatus) {
	                    console.log(data);
	                    if(data.length > 0 && data[0].opResult == 'success') {
	                      swal("使用成功!", {
	                        icon: "success",
	                        //timer: 2000,
	                      });
	                    } else {
	                      swal("使用失败!", {
	                        icon: "error",
	                        //timer: 2000,
	                      });
	                    }
	                  },
	                  error: function() {
	                    swal("使用失败!", {
	                      icon: "error",
	                      //timer: 2000,
	                    });
	                  }
	                });
	
	                $("#coupon").val("");
	                $("#secret").val("");
	                $("#coupon").focus();
	              } else {
	                $("#coupon").focus();
	              }
	            });
	          } else {
	            swal({
	              title: coupon_code,
	              icon: "error",
	              text: data.verify.opResultDetail
	            })
	          }
	
	        }
	      });
	
	    }
	
	    var inputDom = document.getElementById('coupon');
	    var maxLen = 0;
	    inputDom.oninput = function() {
	        var value = this.value;
	        var valueLen = value.length;
	        var foucsNum = getCursortPosition(inputDom);
	        if(valueLen > 0){
	            var c = value.replace(/\s/g,  "");
	            var Len = c.length;
	            var List = c.split('');
	            var initNum = 0;
	            for(var i=1;i<Len;i++) {
	                if(i%4 == 0) {　　//每四位分一组
	                    List.splice(i+initNum,0,' ');　　//此处为使用空格分隔
	                    initNum++
	                }
	            }
	            this.value  = List.join('');
	
	            if(maxLen < this.value.length) {
	                if(foucsNum%5 == 0) {
	                    setTimeout(function() {
	                        setCaretPosition(inputDom,foucsNum+1)
	                    },0);
	                }else {
	                    setTimeout(function() {
	                        setCaretPosition(inputDom,foucsNum)
	                    },0);
	                }
	            }else {
	                if(foucsNum%5 == 0) {
	                    setTimeout(function() {
	                        setCaretPosition(inputDom,foucsNum-1)
	                    },0);
	                }else {
	                    setTimeout(function() {
	                        setCaretPosition(inputDom,foucsNum)
	                    },0);
	                }
	            }
	            maxLen = this.value.length;
	        }
	    }
	    
	    inputDom.onchange = function() {
	        var value = this.value;
	        var valueLen = value.length;
	        var foucsNum = getCursortPosition(inputDom);
	        if(valueLen > 0){
	            var c = value.replace(/\s/g,  "");
	            var Len = c.length;
	            var List = c.split('');
	            var initNum = 0;
	            for(var i=1;i<Len;i++) {
	                if(i%4 == 0) {　　//每四位分一组
	                    List.splice(i+initNum,0,' ');　　//此处为使用空格分隔
	                    initNum++
	                }
	            }
	            this.value  = List.join('');
	
	            if(maxLen < this.value.length) {
	                if(foucsNum%5 == 0) {
	                    setTimeout(function() {
	                        setCaretPosition(inputDom,foucsNum+1)
	                    },0);
	                }else {
	                    setTimeout(function() {
	                        setCaretPosition(inputDom,foucsNum)
	                    },0);
	                }
	            }else {
	                if(foucsNum%5 == 0) {
	                    setTimeout(function() {
	                        setCaretPosition(inputDom,foucsNum-1)
	                    },0);
	                }else {
	                    setTimeout(function() {
	                        setCaretPosition(inputDom,foucsNum)
	                    },0);
	                }
	            }
	            maxLen = this.value.length;
	        }
	    }
	
	　   //控制光标移动时，需要使用定时器，避免出现光标控制失效的情况
	    function getCursortPosition(ctrl) {        //获取光标的位置
	        var CaretPos = 0;   // IE Support
	        if (document.selection) {
	            ctrl.focus();
	            var Sel = document.selection.createRange();
	            Sel.moveStart ('character', -ctrl.value.length);
	            CaretPos = Sel.text.length;
	        }
	        // Firefox support
	        else if (ctrl.selectionStart || ctrl.selectionStart == '0')
	            CaretPos = ctrl.selectionStart;
	        return (CaretPos);
	    }
	
	    function setCaretPosition(ctrl, pos) {        //设置光标的位置
	        if(ctrl.setSelectionRange){
	            ctrl.focus();
	            ctrl.setSelectionRange(pos,pos);
	        }
	        else if (ctrl.createTextRange) {
	            var range = ctrl.createTextRange();
	            range.collapse(true);
	            range.moveEnd('character', pos);
	            range.moveStart('character', pos);
	            range.select();
	        }
	    }
	
	  </script>
  </body>
</html>